<%- include('header.html')  -%>

<div class="container jumbotron h-100 w-100" style="text-align:center;left:50%;top:50%;background-color:rgba(0,0,0,0);">
    <div class="col ">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="row imp-bnuz" >
            <h1 class="center-text glitch" data-text="BNUZ" style="margin-top: auto">
                <img src="/img/blog.png" height="150" width="400"><br>
                <a href="https://qm.qq.com/cgi-bin/qm/qr?k=ai-csHAFY4txTEyanMrwMFXafcH4teut&jump_from=webapi" target="_blank" class="i18n"
                   data-iname="icon_alt.qq" data-iattr="title">
                    <img src="//cdn.jsdelivr.net/gh/LIlGG/halo-theme-sakura@1.3.1/source/images/sns/qq.png"/>
                </a>
                <a href="https://space.bilibili.com/81568088" target="_blank" class="social-bili i18n"
                   data-iname="icon_alt.bili" data-iattr="title">
                    <img src="//cdn.jsdelivr.net/gh/LIlGG/halo-theme-sakura@1.3.1/source/images/sns/bilibili.png"/>
                </a>
                <a href="https://music.163.com/#/user/home?id=418773448" target="_blank" class="social-wangyiyun i18n"
                   data-iname="icon_alt.cloudmusic" data-iattr="title">
                    <img src="//cdn.jsdelivr.net/gh/LIlGG/halo-theme-sakura@1.3.1/source/images/sns/wangyiyun.png"/>
                </a>
                <a href="https://www.zhihu.com/people/ke-xing-71-47" target="_blank" class="i18n"
                   data-iname="icon_alt.zhihu" data-iattr="title">
                    <img src="//cdn.jsdelivr.net/gh/LIlGG/halo-theme-sakura@1.3.1/source/images/sns/zhihu.png"/>
                </a>
                <a href="https://blog.csdn.net/Dueser" target="_blank" class="i18n" data-iname="icon_alt.csdn"
                   data-iattr="title">
                    <img src="//cdn.jsdelivr.net/gh/LIlGG/halo-theme-sakura@1.3.1/source/images/sns/csdn.png"/>
                </a>
            </h1>
        </div>
        <br>
        <br>
        <br>
        <br>
        <div class="center-block">
            <a href="#down"><img src="/img/down.png" width="100" height="100"/></a>
        </div>
    </div>
</div>


<div class="container-fluid" style="background-color:rgba(255,255,255,0);" id="down">
    <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10" style="background-color:rgba(255,255,255,0.7);"/>
            <br>
            <br>
            <h2 class="mb-4">热门推荐</h2>

            <% hots.forEach(hot => { %>
            <div class="row">
                <div class="col-my-2"></div>
                <div class="col my-8 center-block">
                    <div class="jumbotron title" style="background: url('<%=hot.thumbnail %>') no-repeat center;background-size: 100%;">
                        <a href="/article/<%=hot.id %>" class="stretched-link"></a>
                        <div class="card-body col-md-5" style="background-color:rgba(255,255,255,0.6);">
                            <h5 class="card-title"><%=hot.title %></h5>
                            <p class="card-text"><small class="text-muted"><%=hot.time.toLocaleString() %></small></p>
                            <p class="card-text"><%=hot.content.replace(/<[^>]+>/g,'').substring(0,100) %>...</p>

                        </div>
                    </div>
                </div>
            </div>
            <% }) %>

        </div>
    </div>
</div>

<div class="container-fluid" style="background-color:rgba(255,255,255,0);">
    <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10" style="background-color:rgba(255,255,255,0.7);"/>
            <br>
            <br>
            <h2 class="mb-4">最新博文</h2>


            <% articles.forEach(article => { %>
            <div class="row">
                <div class="col-my-2"></div>
                <div class="col my-8 ">
                    <div class="jumbotron title" style="background: url('<%=article.thumbnail %>') repeat-x center;background-size: 100%;">
                        <a href="/article/<%=article.id %>" class="stretched-link"></a>
                        <div class="card-body col-md-5" style="background-color:rgba(255,255,255,0.6);">
                            <h5 class="card-title"><%=article.title %></h5>
                            <p class="card-text"><small class="text-muted"><%=article.time.toLocaleString() %></small></p>
                            <p class="card-text"><%=article.content.replace(/<[^>]+>/g,'').substring(0,100) %>...</p>

                        </div>
                    </div>
                </div>
            </div>
            <% }) %>

        </div>
    </div>
</div>



<%- include('footer.html')  -%>
